<template>
  <div class="headr-box ThemeColor">
    <header class="header clearfix">
      <div class="sign-up">
        <div class="request" @click="goMyRequest" @mouseenter="enter">
          <i class="request-icon"></i>

          <span style=" vertical-align: middle;" id="myCartTotal">{{total}}</span>
          <!-- 购物车详情start -->
          <div class="cart-flyout cart-container" v-if="data.length || listData.length">
            <div class="cart-header">
              <div class="cart-cell cart-desc">
                <span class="cart-desc-title">Your Cart</span>
                <span class="cart-desc-qty">({{total}} items)</span>
              </div>
              <div class="cart-cell cart-quantity">Qty</div>
              <div class="cart-cell cart-price">Price</div>
            </div>
            <div class="cart-item-list">
              <div class="cart-item" v-for="(item,index) in listData" :key="item.sku">
                <div class="cart-cell cart-desc">
                  <router-link class="cart-img" target="_blank" :to="'/home/' + item.sku">
                    <img v-lazy="imgUrl+ item.image.src + '?x-oss-process=image/resize,h_100,limit_0'"/>
                  </router-link>
                  <router-link class="cart-title" target="_blank" :title="item.headLine"
                               :to="'/home/' + item.sku">{{item.headLine}}
                  </router-link>
                </div>
                <div class="cart-cell cart-quantity">1</div>
                <div class="cart-cell cart-price" style="color: #53a318;">${{item.price}}</div>
              </div>
              <div class="cart-item" v-for="(item,index) in data" :key="index">
                <div class="cart-cell cart-desc">
                  <router-link class="cart-img" target="_blank" :to="'/home/' + item.product.sku">
                    <img v-lazy="imgUrl+ item.product.images[0].src + '?x-oss-process=image/resize,h_100,limit_0'"/>
                  </router-link>
                  <router-link class="cart-title" target="_blank" :title="item.product.headLine"
                               :to="'/home/' + item.product.sku">{{item.product.headLine}}
                  </router-link>
                </div>
                <div class="cart-cell cart-quantity">{{item.quantity}}</div>
                <div class="cart-cell cart-price" style="color: #fb333e">${{item.newestPrice.amount}}</div>
              </div>
            </div>
            <div class="cart-footer">
              <div class="cart-subtotal">
                <div class="subtotal-text"> Subtotal:<b>${{totalAmount.amount}}</b></div>
              </div>
              <div class="cart-links">
                <router-link to="/my-cart" class="btn-buy btn-small"> View Cart</router-link>
              </div>
            </div>
          </div>
          <div class="cart-flyout cart-empty-container" v-else>
            <div class="cart-empty-body">
              <div class="cart-empty-header">Your Shopping Cart is Empty!</div>
              <p class="cart-empty-content">Time to fill this bad boy with great products like gadgets, electronics,
                housewares, gifts and other great offerings from
                <router-link to="/home" class="Shopping">Continue Shopping ></router-link>
                .
              </p>
            </div>
          </div>
          <!--购物车详情end-->
        </div>
        <span class="sign-up-btn" @click="goSignUp">Sign Up</span>
      </div>
      <div class="headr-info clearfix">
        <div class="logo">
          <router-link target="_self" to="/">
            <img src="/static/img/head/logo.png" alt="meet50off"/>
          </router-link>
        </div>
        <div class="search-box">
          <!--<input type="text" class="input" v-model="input" :placeholder="placeholder" @keyup.enter="changeSearch"/>-->
          <!--<i @click="clear" v-show="input" class="off-search"></i>-->
          <!--<button class="btn-search" @click="search"></button>-->
        </div>
        <div class="sign-in" @mouseover="signShow" @mouseout="signHide()">
          <span class="span1" @click="goSign" v-show="!userShow">Sign In</span>
          <span class="span2" @click="exit" v-if="userShow">Sign Out</span>
          <span>My Stuff</span>
          <div class="sign-in-box">
            <div class="signin-cont">
              <!--<div class="cont-left">-->
                <!--<router-link class="item" to="/my-cart">-->
                  <!--<svg t="1527672740635" class="link-icon" style="" viewBox="0 0 1025 1024" version="1.1"-->
                       <!--xmlns="http://www.w3.org/2000/svg" p-id="6792" xmlns:xlink="http://www.w3.org/1999/xlink"-->
                       <!--width="26.025390625" height="26">-->
                    <!--<defs></defs>-->
                    <!--<path-->
                      <!--d="M651.684145 237.947901c-36.314861 36.314861-35.649406 95.825603 1.473509 132.948518 37.122915 37.122915 96.633656 37.78837 132.948518 1.473509 36.314861-36.314861 35.649406-95.825603-1.473509-132.948518C747.509749 202.298495 687.951474 201.63304 651.684145 237.947901zM752.500665 338.764421c-18.157431 18.157431-47.912802 17.824703-66.450493-0.760521-18.585224-18.585224-18.917951-48.340594-0.760521-66.498025 18.157431-18.157431 47.912802-17.824703 66.450493 0.760521C770.325368 290.85162 770.658096 320.606991 752.500665 338.764421z"-->
                      <!--p-id="6793" fill="#18823a"></path>-->
                    <!--<path-->
                      <!--d="M966.729829 32.322128 519.876409 0 6.715094 513.161315c-9.078715 9.078715-8.936118 23.956401 0.332728 33.225246l470.619691 470.619691c9.268846 9.268846 24.241596 9.268846 33.177714 0.332728l513.161315-513.161315-32.322128-446.85342C990.828827 44.442926 979.373485 33.225246 966.729829 32.322128zM510.132238 950.840955c-9.221313 9.17378-24.003933 8.888585-33.320311-0.427793l-403.218547-403.218547c-9.268846-9.268846-9.506508-24.241596-0.427793-33.320311l469.336312-469.336312 375.792271 35.411743c12.786254 1.188314 24.479259 12.738721 25.715105 25.715105l35.411743 375.792271L510.132238 950.840955z"-->
                      <!--p-id="6794" fill="#18823a"></path>-->
                  <!--</svg>-->
                  <!--<span class="primary-link-text">My Cart</span>-->
                <!--</router-link>-->
                <!--<router-link class="item" to="/my-order">-->
                  <!--<svg t="1527682028959" class="link-icon" style="" viewBox="0 0 1024 1024" version="1.1"-->
                       <!--xmlns="http://www.w3.org/2000/svg" p-id="16197" xmlns:xlink="http://www.w3.org/1999/xlink"-->
                       <!--width="26" height="26">-->
                    <!--<defs></defs>-->
                    <!--<path-->
                      <!--d="M349.7 163.6v136.2H213.6l136.1-136.2m40-96.6L117 339.7h272.7V67zM867 107v810H157V356.3L406.3 107H867m40-40H389.7L117 339.7V957h790V67zM762 356.6H412v40h350v-40z m0 120.1H262v40h500v-40z m0 120.2H262v40h500v-40z m0 120.2H262v40h500v-40z"-->
                      <!--fill="#18823a" p-id="16198"></path>-->
                  <!--</svg>-->
                  <!--<span class="primary-link-text">My Orders</span>-->
                <!--</router-link>-->
                <!--<router-link class="item" to="/my-account">-->
                  <!--<img src="../../../static/img/head/account.png" alt="" height="23px" class="link-icon">-->
                  <!--<span class="primary-link-text">My Account</span>-->
                <!--</router-link>-->
                <!--<router-link class="item" to="/my-wishlist">-->
                  <!--<img src="../../../static/img/head/wishlist.png" alt="" width="22px" class="link-icon">-->
                  <!--<span class="primary-link-text">My Wishlist</span>-->
                <!--</router-link>-->
              <!--</div>-->
              <div class="cont-right" v-show="!userShow">
                <div class="form-box">
                  <div class="field-inputs">
                    <input class="field-input" v-model="loginEmail" type="email" placeholder="Email" name="email"
                           autocorrect="off" @keyup.enter="checkLogin">
                    <span class="error-info" v-html="errorEmail"></span>
                  </div>
                  <div class="field-inputs">
                    <input class="field-input field-pwd-input" v-model="loginPassword" placeholder="Password"
                           type="password" name="password" autocorrect="off" @keyup.enter="checkLogin">
                    <span class="error-info" v-html="errorPwd"></span>
                  </div>
                  <div class="check-forget clearfix">
                    <label class="cek-left" @click="remeberPwdFn">
                      <span class="remember-pwd" :class="{'cek-true': remeberPwd}"></span>
                      <span class="rem-text">Remember Me</span>
                    </label>
                    <span class="forgot cek-right" @click="forgotPassword">Forgot Password?</span>
                  </div>
                  <button class="btn-signin" type="submit" tabindex="0" @click="checkLogin">Sign In</button>
                </div>
                <div class="ls-signin-flyout-or">Or sign in with</div>
                <div class="ls-signin-flyout-passports">
                  <div class="facebook-login">
                    <button class="btn-cta btn-facebook" id="ls-btn-facebook" tabindex="0" @click="facebookLogin">
                      <span class="passport-icon icon-facebook"></span>
                      <span class="passport-text">Facebook</span>
                    </button>
                  </div>
                  <div class="google-plus-login" data-bhw="GoogleLogin" data-bhw-path="Header|GoogleLogin">
                    <button class="btn-cta btn-google-plus" id="ls-btn-google" tabindex="0" @click="googleLogin">
                      <span class="passport-icon icon-google-plus"></span>
                      <span class="passport-text">Google</span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
  </div>
</template>

<script type="text/ecmascript-6">
  import {classification} from 'api/categories'
  import {getRequests} from 'api/requests'
  import {getCartList} from 'api/cart'
  import store from '@/store'
  import hello from 'hellojs/dist/hello.all.js'
  import {loginByUsername, postAccessToken} from 'api/login'
  import {Register} from 'api/register'
  import {getToken, setToken, removeToken} from 'common/js/token/auth'
  import {mapActions, mapMutations, mapGetters} from 'vuex'
  import monitoring from '../../common/js/monitoring';

  export default {
    data() {
      return {
        imgUrl: imgUrl,
        // 根据sign-in 是否有焦点  来控制鼠标移出事件
        isFocus: false,
        total: 0, //购物车总件数
        totalRecords: 0, //cashback订单总数
        totalProductCount: 0, //自卖商品总件数
        errorEmail: '',
        errorPwd: '',
        remeberPwd: true,
        loginEmail: '',
        loginPassword: '',
        input: '',
        placeholder: 'Search | Meet50off',
        data: [],
        totalAmount: [],
        listData: [],
        TreeShapeCategories: []  //树形分类数据
      }
    },
    computed: {
      ...mapGetters([
        'userShow'
      ])
    },
    created() {
      // console.log(this.userShow)
      // this._classification()
      // this.User()
    },
    mounted() {
      $('body').on('click', function () {
        $('.sign-in-box').hide()
      })
      $('.sign-in-box').on('click', function (e) {
        e.stopPropagation()
      })
      hello.init({
        // google: '909861172321-a23nkeulc89l1ivattpadhq7hvcisht0.apps.googleusercontent.com', // localhost
        // google: '909861172321-570om8ub9rehrqss4c54sbkqka2dl482.apps.googleusercontent.com',     // test meet50off
        google: '909861172321-ajb3ab3n4e9st4lr6t6tcvk2dvf2e3m3.apps.googleusercontent.com',  //   pro
        facebook: '423178231477250'
      }, {
        // Define the OAuth2 return URL
        // This can be anything you like, as long as its the callback associated with the your provider-app client id.
        // It could even be localhost, e.g. http://localhost/somepath as phonegap is not run from a domain so SameOrigin breaks,
        // instead we take advantage of being able to read the popups URL in PhoneGap redirect_uri: 'https://adodson.com/hello.js/redirect.html'
        // redirect_uri: 'http://localhost:9000/sign-in/redirect'
        redirect_uri: 'https://meet50off.com/sign-in/redirect'
      })
    },
    methods: {
      //搜索
      // transKeyWords() {
      //   this.setinput(this.input)
      // },
      clear() {
        this.input = ''
      },
      search() {
        this.$router.push({
          path: `/search`
        })
        this.setinput(this.input.trim())
      },
      changeSearch() {
        this.$router.push({
          path: `/search`
        })
        this.setinput(this.input.trim())
      },
      //end
      goSign() {
        this.$router.push('/sign-in')
      },
      goSignUp() {
        this.$router.push({
          name: 'SingIn',
          params: {
            signup: 1
          }
        })
      },
      goMyRequest() {
        this.$router.push('/my-cart')
      },
      _classification() {
        classification().then((res) => {
          this.setALllCategories(res)
          let attributes = {
            id: 'categoryId',
            parentId: 'parentId'
          }
          this.TreeShapeCategories = this.toTreeData(res.concat(), attributes)
          this.setTreeShapeCategories(this.TreeShapeCategories)
          window.localStorage.setItem("TreeShapeCategories", JSON.stringify(this.TreeShapeCategories));
        })
      },
      ///////////////////////////////////
      //分类处理成树形结构  支持多级分类////
      //////////////////////////////////
      treeObj(originObj) {
        //对象深拷贝
        let obj = {};
        for (let key in originObj) {
          let val = originObj[key];
          obj[key] = val !== null && val.toString() === '[object Object]' ? this.treeObj(val) : val;
        }
        //对象新增children键值，用于存放子树
        obj['children'] = [];
        return obj;
      },
      //data：带转换成树形结构的对象数组
      //attributes：对象属性
      toTreeData(data, attributes) {
        const _this = this
        let resData = data;
        let tree = [];
        //找寻根节点
        for (let i = 0; i < resData.length; i++) {
          if (resData[i][attributes.parentId] === '' || resData[i][attributes.parentId] === null || resData[i][attributes.parentId] === '0') {
            tree.push(this.treeObj(resData[i]));
            resData.splice(i, 1);
            i--;
          }
        }
        run(tree);

        //找寻子树
        function run(chiArr) {
          if (resData.length !== 0) {
            for (let i = 0; i < chiArr.length; i++) {
              for (let j = 0; j < resData.length; j++) {
                if (chiArr[i][attributes.id] === resData[j][attributes.parentId]) {
                  let obj = _this.treeObj(resData[j]);
                  chiArr[i].children.push(obj);
                  resData.splice(j, 1);
                  j--;
                }
              }
              run(chiArr[i].children);
            }
          }
        }

        return tree;
      },
      //////////////////////
      ///////////end/////////
      ////////////////////
      signShow() {
        $('.sign-in-box').show()
      },
      signHide() {
        if ($('.field-input').is(':focus')) {
          return
        }
        $('.sign-in-box').hide()
      },
      User() {
        // this.getTotal()
      },//获取request
      getTotal() {
        getRequests(1, 100).then(res => {
          if (res !== undefined) {
            this.totalRecords = res.totalRecords
            this.listData = res.data
          }
          return getCartList()
        })
          .then(res => {
            if (res !== undefined) {
              this.data = res.cartItems
              this.totalAmount = res.totalAmount
              this.totalProductCount = res.totalProductCount
              this.total = this.totalRecords + this.totalProductCount
            }
          })
      },
      enter() {
        // this.User() //鼠标悬停触发事件
      },
      remeberPwdFn() { //忘记密码
        if (this.remeberPwd) {
          this.remeberPwd = false
        } else {
          this.remeberPwd = true
        }
      },
      forgotPassword() {
        this.$router.push({
          path: `/forgot-password`
        });
      },
      checkLogin() {
        if (this.loginEmail === '') {
          this.errorEmail = 'Please enter the mailbox to log in.'
          return false
        }
        if (this.loginPassword === '') {
          this.errorPwd = 'Please enter the password in the login.'
          return false
        }
        monitoring.login({"loginEmail": this.loginEmail});//todo Facebook Pixel & Google Analytic Code    login

        this.$store.dispatch('LoginByUsername', {
          username: this.loginEmail,
          password: this.loginPassword
        }).then((res) => {
          if (res) {
            this.setUserShow(true)
            this.loginSuccess = true
            this.GetUserInfo()
            setTimeout(() => {
              let redirect = decodeURIComponent(this.$route.query.redirect || '/');
              this.$router.push({
                path: redirect,
                query: {from: 'login'}
              });//登录成功之后重定向到首页
            }, 200);
          }
        }).catch(err => {
          if (err.status === 400) {
            console.log(err.data)
            this.errorEmail = 'You must have a confirmed email to log in.'
          } else if (err) {
            // this.errorPwd = 'Please enter a true password in the login.'
          }
        })
      },
      //第三方登录
      googleLogin() {
        monitoring.googleLogin();//todo Facebook Pixel & Google Analytic Code    googleLogin
        const _this = this
        setTimeout(() => {
          this.login('google', function (result) {
            var token = result.authResponse.access_token;
            // this.authenticate('google', token).then(function (token) { serverToken = token; });
            _this.token = token
          })
        }, 200)
      },
      facebookLogin() {
        monitoring.facebookLogin();//todo Facebook Pixel & Google Analytic Code    facebookLogin
        const _this = this;
        setTimeout(() => {
          this.login('facebook', function (result) {
            var token = result.authResponse.access_token;
            // this.authenticate('google', token).then(function (token) { serverToken = token; });
            _this.token = token
          })
        }, 200)
      },
      login(network, callback) {
        const _this = this
        var hi = hello(network);
        hi.login({scope: 'email'}).then(function (r) {
          console.log(JSON.stringify(r));
          callback(r);
          return hi.api('me');
        }).then(function (data) {
          if (network === 'google') {
            _this.email = data.emails[0].value
          } else if (network === 'facebook') {
            _this.email = data.email
          } else {
            return
          }
          _this.setLoading(true)
          postAccessToken(network, _this.token, _this.email).then(res => {
            _this.setUserShow(true)
            _this.$store.commit('SET_TOKEN', res)
            _this.GetUserInfo()
            setToken(res)
            _this.setLoading(false)
            let redirect = decodeURIComponent(_this.$route.query.redirect || '/');
            _this.$router.push({
              path: redirect
            })
          })
        }, function (err) {
          console.log(JSON.stringify(err))
        })
      },
      exit() {
        this.LogOut().then(res => {
          monitoring.logOut();//todo Facebook Pixel & Google Analytic Code    logOut
          this.setUserShow(false)
          setTimeout(() => {
            this.$router.push({
              path: `/home`
            });
          }, 200)

        })
        hello('google').logout().then(() => {
          console.log(111)
        })
        hello('facebook').logout().then(() => {
          console.log(222)
        })
      },
      ...mapMutations({
        setALllCategories: 'SET_ALL_CATEGORIES',
        setTreeShapeCategories: 'SET_TREE_SHAPE_CATEGORIES',
        setinput: 'SET_INPUT',
        setUserShow: 'SET_USER_SHOW',
        setSignUpVal: 'SET_SIGNUP_VAL',
        setLoading: 'SET_ROUTE_LOADING',
        setFocus: 'SET_CATEGORY_FOCUS',
        setCategoryName: 'SET_CATEGORY_NAME'
      }),
      ...mapActions([
        'LoginByUsername',
        'LoginByThirdParty',
        'LogOut',
        'GetUserInfo'
      ])
    },
    watch: {
      '$route'(to, from) {
        this.User()
        // this.getTotal()
        if (to.path !== '/search') {
          this.input = ''
        }
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  @import "~common/stylus/mixin"
  .headr-box {
    width: 100%;
    height: auto;
    /*background: url("../../../static/img/head/head-bg.png")*/
    /*
    background: -webkit-gradient(linear,0% 0%, 0% 49%, from(#7D130B), to(#14010C), color-stop(0.0,#ED0E1D))
    background: gradient(linear,0% 0%, 0% 49%, from(#7D130B), to(#14010C), color-stop(0.0,#ED0E1D))
    */
  }

  .headr-box .header {
    max-width: 1080px;
    margin: 0 auto;
    color: #fff;
  }

  .headr-box .header .headr-info {
    display: flex
  }

  .headr-box
    .sign-up
      height: 32px;
      line-height: 36px;
      text-align: right;
      font-size: 12px;

      .cart-flyout
        width: 410px;

        .cart-header
          height: 29px;
          position: absolute;
          top: 15px;
          width: 395px
          padding: 0;
          border-bottom: 1px solid #d5d8db

          .cart-desc
            width: 260px;

            .cart-desc-title
              font-size: 16px;
              font-weight: 600;

            .cart-desc-qty
              color: #a5a8ab
              display: inline-block;
              margin: 0 5px;

          .cart-cell
            padding: 0 5px;
            display: table-cell;
            vertical-align: baseline;
            text-align: left;

          .cart-quantity
            text-align: center;
            width: 50px;

          .cart-price
            text-align: right;
            width: 68px;

        .cart-item-list
          width: auto;
          max-height: 275px;
          z-index: 1000;
          overflow-x: hidden;
          overflow-y: auto;
          margin: 29px 0 0;

          .cart-item
            margin: 15px 0 8px;

            .cart-cell
              padding: 0 5px;
              display: table-cell;
              vertical-align: top;

            .cart-desc
              width: 327px;

              .cart-img
                float: left;
                padding: 0 15px 0 0;
                width: 90px;

              .cart-img img
                max-width: 100%;

              .cart-title
                width: 60%
                text-align left
                line-height: 22px
                cursor: pointer
                font-size: 13px
                text-overflow: -o-ellipsis-lastline;
                text-overflow: ellipsis;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;

            .cart-quantity
              text-align: left;
              width: 40px;

            .cart-price
              text-align: right;
              width: 68px;

        .cart-footer
          text-align: right;

          .cart-subtotal
            background: #f6f7f8
            padding: 6px 10px 5px;
            margin: 0 0 13px;

          .cart-subtotal b
            font-size: 14px;
            display: inline-block;
            vertical-align: baseline;
            margin: 0 0 0 5px;
            color: #fb333e

          .cart-links
            .btn-buy
              color: #fff;
              display: inline-block;
              font-size: 1rem;
              background: #fb333e;
              margin: 0;
              min-width: 9rem;
              outline: 0;
              overflow: visible;
              line-height: 1.4;
              padding: 2px 0;
              border-radius: 2px;
              position: relative;
              text-align: center;
              transition: background-color .2s ease-out, border-color .2s ease-out, color .2s ease-out;

      .cart-flyout:after
        border: solid transparent;
        border-bottom-color: #fff
        border-width: 7px;
        content: "";
        position: absolute;
        bottom: 100%;
        right: 75px
        height: 0;
        width: 0;
        margin: 0 0 0 7px;
        pointer-events: none;

      .cart-flyout
        cursor: default;
        text-transform: none;
        display none
        line-height: 18px;
        position: absolute;
        box-shadow: 0 0 14px rgba(51, 51, 51, .4)
        overflow: inherit;
        background: #fff
        right: -59px
        z-index 111
        font-size: 13px;
        padding: 15px;
        color: #000
        top: 40px;
        white-space: normal;

        .cart-empty-body
          .cart-empty-header
            text-align left
            border-bottom: 1px solid #d5d8db
            margin: 0 0 15px;
            padding: 0 0 5px;
            font-size: 16px;
            font-weight: 600;

          .cart-empty-content
            text-align left

            .Shopping
              color: #0093ea !important

  .headr-box .request {
    display: inline-block;
    width: 70px;
    height: 16px;
    margin-right: 60px;
    vertical-align: middle;
    padding-left: 0px;
    background-size: auto 16px;
    background-position: 48px;
    cursor: pointer
    padding-bottom: 30px;
    line-height: 30px;
    position: relative;

    #myCartTotal {
      display: inline-block;
      padding: 2px
      width: 15px;
      height: 15px;
      text-align: center
      line-height: 15px
      background: rgba(224, 53, 53, 1);
      border-radius: 50%;
    }
  }

  .headr-box .request .request-icon {
    display: inline-block;
    height: 16px;
    vertical-align: middle;
    padding-left: 16px;
    background: url(../../../static/img/head/cart.png) no-repeat left center;
    background-size: auto 16px;
    cursor: pointer
    padding-bottom: 18px;
    position: relative;
  }

  .headr-box .request:hover .cart-flyout {
    display: block
  }

  .headr-box .sign-up-btn {
    vertical-align: middle;
    cursor: pointer
    font-size: 12px
    display: inline-block;
    height: 41px;
  }

  .headr-box .logo {
    float: left;
    margin-right: 20px;
    display: inline-block;
  }

  .headr-box .logo img {
    height: 27px;
  }

  .headr-box .search-box {
    flex 1
    float: left;
    position relative
  }

  .headr-box .search-box .input {
    float: left;
    width: 84%;
    height: 35px;
    background: #fff;
    border-radius: 4px;
    padding-left: 10px;
    border: 1px solid #ddd;
    margin-bottom: 19px;
    margin-right: 17px;
    outline none
    font-size: 14px
  }

  .headr-box .search-box .input::-webkit-input-placeholder {
    color: #bbb
  }

  .headr-box .search-box .input::-ms-input-placeholder {
    color: #bbb
  }

  .headr-box .search-box .off-search
    position absolute
    right: 16%;
    top: 11px;
    font-size: 22px;
    color: $color-dialog-background
    background url("../../../static/img/close.svg") no-repeat
    width: 17px;
    height: 16px;

  .headr-box .btn-search {
    width: 34px;
    height: 34px;
    border: 1px solid #fff;
    border-radius: 3px;
    background: url(../../../static/img/head/search-btn.png) no-repeat center center;
    vertical-align: middle;
    cursor: pointer
    outline none
    margin-top: 1px;
  }

  .headr-box .btn-search:hover {
    background: url(../../../static/img/head/search-btn.png) no-repeat center center hsla(0, 0%, 100%, .5);
  }

  .headr-box .sign-in {
    position: relative;
    float: right;
    display: inline-block;
    height: 21px;
    line-height: 21px;
    vertical-align: middle;
    cursor: pointer;
    margin-top: 10px;
    font-size: 20px;
    padding-bottom: 13px;
  }

  .headr-box .sign-in .span1 {
    display: inline-block;
    width: 70px;
    text-align: center;
    border-right: 2px solid #fff;
    margin-right: 4px;
  }

  .headr-box .sign-in .span2 {
    display: inline-block;
    width: 90px;
    text-align: center;
    border-right: 2px solid #fff;
    margin-right: 6px;
  }

  .headr-box .sign-in-box {
    display: none;
    position: absolute;
    right: 0;
    top: 28px;
    z-index: 10;
    padding: 18px 0;
    cursor: default;
    list-style: none;
    margin: 4px 0 0;
    box-shadow: 0 0 14px rgba(51, 51, 51, .4);
    background: #fff;
  }

  .headr-box .sign-in-box:after {
    bottom: 100%;
    border: 8px solid transparent;
    border-bottom-color: #fff;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    right: 20px;
    margin: 0 0 0 -8px;
  }

  .headr-box .signin-cont {
    display: flex
  }

  .headr-box .cont-left {
    border-right: 1px solid #ddd;
    min-width: 226px;
    padding: 20px 0;
    font-size: 14px;
  }

  .headr-box .cont-right {
    padding: 24px;
  }

  .headr-box .item {
    padding: 0 24px;
    line-height: 36px;
    text-decoration: none;
    display: block;
    white-space: nowrap;
    color: #333;
  }

  .headr-box .item .link-icon {
    font-size: 24px;
    display: inline-block;
    vertical-align: middle;
    margin: -2px 10px 0 0;
  }

  .headr-box .cont-right {
    padding: 24px;
    padding-bottom: 7px;
  }

  .headr-box .form-box {
    min-width: 275px;
    margin: 0;
    line-height: normal;
  }

  .headr-box .form-box .field-inputs {
    position: relative;
    height: 73px;
  }

  .headr-box .form-box .field-input {
    padding-left: 4%;
    padding-right: 14%;
    width: 80%;
    border: 1px solid #ddd;
    border-radius: 2px;
    height: 40px;
    line-height: 40px;
    background: url(../../../static/img/head/email.png) no-repeat 95% center;
    font-size: 12px;
  }

  .headr-box .form-box .field-pwd-input {
    background: url(../../../static/img/head/pwd.png) no-repeat 94% center
  }

  .headr-box .form-box .error-info {
    font-size: 12px;
    color: #ff2552
  }

  .headr-box .form-box .remember-pwd {
    border: 1px solid #ddd;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    background #fff;
    display: inline-block;
    margin-right: 5px;
  }

  .headr-box .form-box .cek-true {
    border: 1px solid transparent;
    background: url(../../../static/img/head/check.png) #18823a no-repeat center center
  }

  .headr-box .form-box .rem-text {
    font-size: 12px;
    color: #333;
  }

  .headr-box .form-box .forgot {
    color: dodgerblue;
    font-size: 12px
  }

  .headr-box .cont-right .btn-signin {
    width: 100%;
    height: 45px;
    line-height: 45px;
    background: #18823a;
    color: #fff;
    font-size: 16px;
    border-radius: 2px;
  }

  .headr-box .ls-signin-flyout-or {
    margin: 12px 0;
    font-size: 12px;
    text-align: center;
    color: #333;
  }

  .headr-box .ls-signin-flyout-passports {
    display: flex;
  }

  .headr-box .cont-right button {
    border: none;
    font-size: 12px;
    padding: 0;
    min-width: inherit;
    width: 100%;
    position: relative;
    cursor: pointer
  }

  .headr-box .facebook-login {
    margin-right: 10px;
    flex: 1;
  }

  .headr-box .facebook-login button {
    background: #3b5998;
    color: #fff
  }

  .headr-box .google-plus-login {
    flex: 1;
  }

  .headr-box .google-plus-login button {
    background: #4285f4;
    color: #fff
  }

  .headr-box .cont-right .passport-icon {
    font-size: 18px;
    left: 3px;
    top: 3px;
    position: absolute;
    padding: 0;
    width: 34px;
    height: 34px;
    display: inline-block
  }

  .headr-box .cont-right .passport-text {
    line-height: 40px;
    margin-left: 28px;
  }

  .headr-box .cont-right .icon-facebook {
    background: url(https://www2.Grouponcdn.com/user_sessions/assets/facebook-FB-f-Logo__white_512-03ae748004.png) no-repeat;
    background-size: 30px 30px;
    background-position: 9px 8px;
    top: -1px;
    left: -3px;
  }

  .headr-box .cont-right .icon-google-plus {
    background: url(https://www2.Grouponcdn.com/user_sessions/assets/google-logo_googleg_48dp@3x-8305fa97a6.png) no-repeat;
    background-position: 7px 7px;
    background-size: 20px 20px;
    background-color: #fff;
  }

  .headr-box .cont-right .check-forget {
    margin-bottom: 10px;
  }

  .headr-box .cont-right .cek-left {
    float: left;
    cursor: pointer
  }

  .headr-box .cont-right .cek-right {
    float: right;
    margin-top: 5px;
    cursor: pointer
  }


</style>
